@colorwhite:#fff;
@fs18:18px;
// 1.子元素直接嵌套
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: pink;
    a {
        width: 50px;
        height: 50px;
        color: @colorwhite;
        background-color: black;
        line-height: 50px;
        text-align: center;
        font-size: @fs18;
        //2.伪类伪元素前加&,不加是给a子元素加hover，hover前为空格
        &:hover {
            background-color: purple;
        }
    }
}
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: blue;
    .nav-hd {
        width: 50px;
        height: 50px;
        font-size: @fs18;
        line-height: 50px;
        color: @colorwhite;
        text-align: center;
        background-color: green;
    }
}